<template>
	<div class="onex-footer-container">
		 {{data.OS.name}} {{data.OS.version}} | {{data.brower.name}} {{data.brower.version}} 
	</div>
</template>

<script setup>
	import { reactive, onMounted} from 'vue';
	import UAParser from 'ua-parser-js';
	const parser = new UAParser();
	const result = parser.setUA(navigator.userAgent).getResult();
	
	console.log("===>" + JSON.stringify(result));
	
	const data = reactive({
		brower:{},
		OS:{}
	});
	
	onMounted(()=> {
		data.brower = parser.getBrowser();
		data.OS = parser.getOS();
	})
	
</script>

<style scoped>
	.onex-footer-container {
		width:100%;
		height: 100%;
		padding: 0.3rem;
		display: flex;
		flex-direction: row;
		justify-content:center;
		align-items:center;	
	} 
</style>